<template>
  <div id="one-box">
    <div class="content">
      <p class="search-result">搜索结果: <span>{{songCount}}条</span> </p>
        <div class="music-list">
          <div class="list" v-for="item in songs" :key="item.id">
            <div class="music">
              <div class="img">
                <img @click="albumInfo(item)" :src="item.album.artist.img1v1Url" alt="" />
              </div>
              <div class="control">
                <div class="left">
                  
                </div>
                <div class="right">
                  <i @click="albumPlay(item)" class="iconfont iconfont-cursor"
                    >&#xe638;</i
                  >
                </div>
              </div>
            </div>
            <div class="music-info" :title="item.album.name" @click="albumInfo(item)">
              {{ item.album.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="more" @click="page++;init()" v-if="more">加载更多</div>
      <!-- <div class="footer-size">
        <el-pagination
          v-if="songCount>35"
          class="pagination"
          background
          layout="prev, pager, next, sizes"
          :current-page.sync="page"
          @current-change="init();scrollTo(0,800)"
          :page-sizes="[35]"
          :total="songCount"
        >
        </el-pagination>
      </div> -->
  </div>
</template>

<script>
import { scrollTo } from '@/components/scrolltop/scrollTo'
import {apiSearch} from '@/api'
export default {
  name: "albumList",
  data() {
    return {
      songCount:0,
      songs:[],
      page:1,
      more:true
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getSearch();
    },
    getSearch() {
      apiSearch({ keywords: this.$route.query.msg, limit: this.page * 30,type: 1 }).then((data) => {
        // data.result.songs
        this.songCount = data.result.songCount;
        this.songs = data.result.songs;
        this.more = data.result.hasMore
      });
    },
    albumInfo(val){
      console.log(val,"专辑详情");
      const {id} = val.album
      this.$router.push({
        name:"albumDetails",
        query:{
          id
        }
      })
    },
    albumPlay(val){
      console.log(val,"专辑播放");
    }
  },
};
</script>

<style lang="scss" scoped>
.search-result{
  span{
    color:#333;
    font-size: 13px;
  }
}
.content {
  .music-list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    .list {
      // margin: 0 6px;
      margin: 0 21px;

      margin-top: 20px;
      // margin-right:21px;
      // margin-left:21px;
      display: inline-block;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .music {
        position: relative;
        width: 140px;
        height: 140px;
        .img {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
        .control {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 12px;
          color: rgb(202, 202, 202);
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 27px;
          background-image: url(../../assets/img/homepage-control.png);
          background-position: 0 -537px;
          .font-12 {
            font-size: 12px;
          }
          .iconfont {
            cursor: context-menu;
          }
          .iconfont-cursor {
            cursor: pointer;
          }
          .iconfont-cursor:hover {
            color: #fff;
          }
        }
      }
      .music-info {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        color: #000;
        width: 140px;
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}
.more {
  margin-top:20px;
  text-align: center;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
</style>